<template>
	<view class="hot_goods" >
		<!-- 路径显示 -->
		<image class="bg" src="../../static/backage1.jpg" mode="widthFix"></image>
		<view class="" style="position: absolute;top: 40%;width: 100%;">
			<view style="width: 95%;padding:20rpx; background-color:rgba(255,255,255,0.9)">
				<view style="padding: 10rpx 18rpx 0;color: #1aad19;font-size: 34rpx;">行程概览</view>
				<map style="width: 96%;margin: 0 auto;padding: 23rpx 0;" :latitude="beginAddress.latitude"
					:scale="scale" :markers="covers" :longitude="beginAddress.longitude" :polyline="polyline"></map>
			</view>
			<view style="width: 100%;margin-top:16rpx; background-color:rgba(255,255,255,0.9)">
				<view class="tit" style="padding: 10rpx 18rpx 0;color: #1aad19;font-size: 34rpx;">游记封面</view>
				<view>
					<image style="width: 96%;margin-top:2%;margin-left:2% ;border-radius: 20rpx;" :src="travel.cover">
					</image>
				</view>
			</view>
			<view style="width: 100%;margin-top:20rpx; background-color:rgba(255,255,255,0.9);">
				<!-- border-top-left-radius: 60rpx;border-top-right-radius: 60rpx; -->
				<!-- <view class="tit" style="padding: 10rpx 18rpx 0;color: #1aad19;font-size: 34rpx;">游记内容</view> -->
				<view class="addressInfo" v-for="(item,index) in travel.addressInfo" :key="index">
					<view class="title">{{item.title}}</view>
					<view style="width: 100%;height: 2rpx;margin: 0 auto;background: #000000;"></view>
					<view class="content">内容：{{item.content}}</view>
					<view class="address" @click="toMap(item.latitude,item.longitude)">
						<view style="font-size: 28rpx;color:#1aad19 ;">
						<image style="width:20px;height:20px;" src="../../static/address.png"></image>{{item.address}}</view>
					</view>
					<view style="width:100%">
						<!--遍历全部的附件图片-->
						<view class="contentImg" v-for="addressfile in item.file">
							<image style="width:96%;margin-left:2%;border-radius: 20rpx;margin-top: 2%;"
								:src="addressfile.fileUrl"></image>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;margin-top:16rpx; background-color:rgba(255,255,255,0.9)">
				<view class="title" style="font-size: 32rpx;">
					<view style="color: #007AFF;">发布时间</view>{{travel.createTime}}
				</view>
				<view style="width:100%;">
					<view style="display: flex;justify-content: flex-end;padding: 0 20rpx;">
						<view style="display: flex;">
							<image src="../../static/Icon/dianzan.png" style="width: 40rpx; height: 40rpx;"
								@click="praiseByTravelId"></image>
							<view style="font-size: 28rpx;">点赞{{praiseCount}}</view>
						</view>
						<view style="display: flex;margin-left: 20rpx;">
							<image src="../../static/Icon/Star.png" style="width: 40rpx; height: 40rpx;"
								@click="collectByTravelId"></image>
							<view style="font-size: 28rpx;">收藏{{collectCount}}</view>
						</view>

					</view>

					<!-- <button type="primary"  @click="praiseByTravelId" >点赞{{praiseCount}}</button> -->
					<!-- <button type="primary" @click="collectByTravelId" >收藏{{collectCount}}</button> -->
					<view class="title" style="font-size: 32rpx;">
						<view style="color: #007AFF;">评论</view>
					</view>
					<view v-for="item in commentData">
						<view style="display: flex;padding-left: 22rpx;">
							<view style="font-size: 24rpx;">评论时间</view>
							<view style="font-size: 24rpx;margin-left: 10rpx;">{{item.createTime}}</view>
						</view>
						<view style="margin:14rpx 20rpx;font-size: 24rpx;">{{item.comment}}</view>
						<view style="height: 2rpx;width: 95%;margin: 0 auto;background: #C0C0C0;"></view>
					</view>
					<textarea class="textarea" placeholder-style="border:1px solid #CCCCCC;" placeholder="说点什么吧"
						auto-height=true v-model="comment"> </textarea>
					<button type="primary" style="border-radius: 0;" @click="commentByTravelId">发布</button>
				</view>
			</view>
		</view>


	</view>
</template>
<bottom></bottom>

<script>
	export default {
		data() {
			return {
				travel: {},
				scale: 15,
				beginAddress: {
					latitude: 26.235081,
					longitude: 117.608619,
				},
				covers: [],
				polyline: [{
					points: [],
					width: 2,
				}],
				comment: '',
				praiseCount: 0,
				collectCount: 0,
				commentData: [],
			}
		},
		onLoad: function(option) {
			uni.request({
				url: 'https://xunji.xmxland.space/findById?id=' + option.id,
				method: 'GET',
				success: (res) => {
					this.travel = res.data[0];
					// deal with datetime format
					this.travel.createTime = this.travel.createTime.slice(0, this.travel.createTime.lastIndexOf('.'));
					for (let i = 0; i < this.travel.addressInfo.length; i++) {
						this.beginAddress.latitude = this.travel.addressInfo[i].latitude
						this.beginAddress.longitude = this.travel.addressInfo[i].longitude

						let markerParam = {
							latitude: this.travel.addressInfo[i].latitude,
							longitude: this.travel.addressInfo[i].longitude,
							iconPath: 'https://baker-xunji.oss-cn-beijing.aliyuncs.com/local.png'
						}
						this.covers.push(markerParam);

						let lineParam = {
							latitude: this.travel.addressInfo[i].latitude,
							longitude: this.travel.addressInfo[i].longitude,
						}
						this.polyline[0].points.push(lineParam);

						uni.request({
							url: 'https://xunji.xmxland.space/countCollectByTravelId?travelId=' +
								this.travel.id,
							method: 'GET',
							success: (res) => {
								this.collectCount = res.data.length;


							}
						});
						uni.request({
							url: 'https://xunji.xmxland.space/countPraiseByTravelId?travelId=' +
								this.travel.id,
							method: 'GET',
							success: (res) => {
								this.praiseCount = res.data.length;
							}
						});



						uni.request({
							url: 'https://xunji.xmxland.space/findCommentByTravelId?travelId=' +
								this.travel.id,
							method: 'GET',
							success: (res) => {
								this.commentData = res.data;
								this.commentData.forEach((item) => {
									item.createTime = item.createTime.slice(0, item.createTime.lastIndexOf('.'));
								})
							}
						});
					}
				}
			});
		},

		methods: {
			toMap(latitude, longitude) {
				let plugin = requirePlugin("routePlan");
				let key = 'LDVBZ-HARLX-MOS4J-TEYHY-HZJZ2-PVBOO';
				let referer = '寻迹';
				let endPoint = JSON.stringify({
					'name': '目的地',
					'latitude': latitude,
					'longitude': longitude
				});
				uni.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				});
			},
			//点赞
			praiseByTravelId() {
				let userInfo = uni.getStorageSync('userInfo');
				if (userInfo === '' || userInfo.openId === '') {
					uni.showToast({
						title: '请先授权登录',
						duration: 1000
					});
					uni.switchTab({
						url: '../../pages/index/my'
					});
				} else {
					// uni.request({
					// 	url: 'https://xunji.xmxland.space/findPraiseByTravelIdAndOpendId?travelId=' + this.travel.id +
					// 		'&openId=' + userInfo.openId,
					// 	method: "GET",
					// 	success: (res) => {
					// 		if (res['praised'] === undefined || ['praised'] === true) {
					// 			uni.showToast({
					// 				title: '您已经点过赞了',
					// 				duration: 1000,
					// 			});
					// 		} else {
					// 			uni.request({
					// 				url: 'https://xunji.xmxland.space/praiseByTravelId?travelId=' + this.travel.id +
					// 					'&openId=' + userInfo.openId,
					// 				method: 'GET',
					// 				success: (res) => {
					// 					uni.showToast({
					// 						title: '点赞成功',
					// 						duration: 1000
					// 					});
					// 				}
					// 			});
					// 		}
					// 	}
					// });
					
					uni.request({
						url: 'https://xunji.xmxland.space/praiseByTravelId?travelId=' + this.travel.id +
							'&openId=' + userInfo.openId,
						method: 'GET',
						success: (res) => {
							uni.showToast({
								title: '点赞成功',
								duration: 1000
							});
						}
					});
				}
			},
			//评论
			commentByTravelId() {
				let userInfo = uni.getStorageSync('userInfo');
				let params = {
					openId: userInfo.openId,
					travelId: this.travel.id,
					comment: this.comment
				}
				if (userInfo === '' || userInfo.openId === '') {
					uni.showToast({
						title: '请先授权登录',
						duration: 1000
					});
					uni.switchTab({
						url: '../../pages/index/my'
					});
				} else {
					uni.request({
						url: 'https://xunji.xmxland.space/commentByTravelId',
						"headers": {
							"Content-type": "application/x-www-form-urlencoded",
						},
						method: 'POST',
						data: params,
						success: (res) => {
							uni.showToast({
								title: '评论成功',
								duration: 1000
							});
						}
					});
				}
			},
			//收藏
			collectByTravelId() {
				let userInfo = uni.getStorageSync('userInfo');
				uni.showToast({
					title: '请先授权登录',
					duration: 1000
				});
				if (userInfo === '' || userInfo.openId === '') {
					uni.switchTab({
						url: '../../pages/index/my'
					});
				} else {
					// uni.request({
					// 	url: 'https://xunji.xmxland.space/findCollectByTravelIdAndOpendId?travelId=' + this.travel.id +
					// 	'&openId=' + userInfo.openId,
					// 	method: 'GET',
					// 	success: (res) => {
					// 		if (res['collected'] === undefined || res['collected'] === true) {
					// 			uni.showToast({
					// 				title: '您已经收藏过了',
					// 				duration: 1000,
					// 			});
					// 		} else {
					// 			uni.request({
					// 				url: 'https://xunji.xmxland.space/collectByTravelId?travelId=' + this.travel.id +
					// 					'&openId=' + userInfo.openId,
					// 				method: 'GET',
					// 				success: (res) => {
					// 					uni.showToast({
					// 						title: '收藏成功',
					// 						duration: 1000
					// 					});
					// 				}
					// 			});
					// 		}
					// 	}
					// });
					uni.request({
						url: 'https://xunji.xmxland.space/collectByTravelId?travelId=' + this.travel.id +
							'&openId=' + userInfo.openId,
						method: 'GET',
						success: (res) => {
							uni.showToast({
								title: '收藏成功',
								duration: 1000
							});
						}
					});
				}
			},
			mounted() {
				let info = uni.createSelectorQuery().in(this).select('swiper_group').boundingClientRect()
				info.exec(res => {
					this.scrollHeight = res[0].height
					console.log(this.scrollHeight)
				});
			}

		},

	}
</script>

<style scoped lang="scss">
	.hot_goods {
		width:100%;
		.bg {
			width: 100%;
			// position: fixed;
			z-index: -1;
		}
	}

	.addressInfo {
		width: 100%;
	}

	.title {
		width: 100%;
		font-weight: bolder;
		text-align: center;
		font-size: 36rpx;
		padding: 20rpx 0 15rpx;
	}

	.content {
		width: 100%;
		padding: 20rpx;
		font-size: 28rpx;
	}

	.address {
		width: 100%;
		// display: flex;
		padding: 0 15rpx;
	}

	.contentImg {
		width: 100%;
	}

	.bottom {
		bottom: env(safe-area-inset-bottom);
	}

	.textarea {
		border: 2rpx solid #C0C0C0;
		width: 90%;
		margin: 20rpx auto;
		border-radius: 20rpx;
		padding-left: 24rpx;
		padding-top: 10rpx;
		height: 200rpx !important;
	}
</style>
